<!-- Local nav. -->
<kbn-top-nav name="dashboard">
  <!-- Transcluded elements. -->
  <div data-transclude-slots>
    <!-- Title. -->
    <div
      data-transclude-slot="topLeftCorner"
      class="kuiLocalTitle"
      role="heading"
      aria-level="1"
    >
      Dashboard
    </div>
  </div>
</kbn-top-nav>

<div
  class="kuiViewContent kuiViewContent--constrainedWidth"
  data-test-subj="dashboardLandingPage"
>
  <div class="kuiViewContentItem kuiVerticalRhythm" ng-if="listingController.showLimitError">
    <div class="kuiInfoPanel kuiInfoPanel--warning">
      <div class="kuiInfoPanelBody">
        <div class="kuiInfoPanelBody__message">
          You have {{ listingController.totalItems }} dashboards, but your "listingLimit" setting prevents the table below from displaying more than {{ listingController.listingLimit }}. You can change this setting under <a kbn-href="#/management/kibana/settings" class="kuiLink">Advanced Settings</a>.
        </div>
      </div>
    </div>
  </div>
  <!-- ControlledTable -->
  <div class="kuiViewContentItem kuiControlledTable kuiVerticalRhythm">
    <!-- ToolBar -->
    <div class="kuiToolBar">
      <div class="kuiToolBarSearch">
        <div class="kuiToolBarSearchBox">
          <div class="kuiToolBarSearchBox__icon kuiIcon fa-search"></div>
          <input
            class="kuiToolBarSearchBox__input"
            type="text"
            placeholder="Search..."
            aria-label="Filter dashboards"
            data-test-subj="searchFilter"
            ng-model="listingController.filter"
          >
        </div>
      </div>

      <div class="kuiToolBarSection">
        <!-- Bulk delete button -->
        <button
          class="kuiButton kuiButton--danger"
          ng-click="listingController.deleteSelectedItems()"
          aria-label="Delete selected dashboards"
          ng-if="listingController.getSelectedItemsCount() > 0 && !listingController.hideWriteControls"
          tooltip="Delete selected dashboards"
          tooltip-append-to-body="true"
          data-test-subj="deleteSelectedDashboards"
        >
          <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-trash"></span>
        </button>

        <!-- Create dashboard button -->
        <a
          class="kuiButton kuiButton--primary"
          href="{{listingController.getCreateDashboardHref()}}"
          aria-label="Create new dashboard"
          data-test-subj="newDashboardLink"
          ng-if="listingController.getSelectedItemsCount() === 0 && !listingController.hideWriteControls"
          tooltip="Create new dashboard"
          tooltip-append-to-body="true"
        >
          <span aria-hidden="true" class="kuiButton__icon kuiIcon fa-plus"></span>
        </a>
      </div>

      <div class="kuiToolBarSection">
        <!-- Pagination -->
        <tool-bar-pager-text
          start-item="listingController.pager.startItem"
          end-item="listingController.pager.endItem"
          total-items="listingController.pager.totalItems"
        ></tool-bar-pager-text>
        <tool-bar-pager-buttons
          has-previous-page="listingController.pager.hasPreviousPage"
          has-next-page="listingController.pager.hasNextPage"
          on-page-next="listingController.onPageNext"
          on-page-previous="listingController.onPagePrevious"
        ></tool-bar-pager-buttons>
      </div>
    </div>

    <!-- TableInfo -->
    <div
      class="kuiPanel kuiPanel--centered kuiPanel--withToolBar"
      ng-if="!listingController.items.length && listingController.filter"
    >
      <div class="kuiTableInfo">
        No dashboards matched your search.
      </div>
    </div>

    <!-- EmptyTablePrompt -->
    <div
      class="kuiPanel kuiPanel--centered kuiPanel--withToolBar"
      ng-if="!listingController.isFetchingItems && !listingController.items.length && !listingController.filter"
    >
      <div class="kuiEmptyTablePrompt">
        <div class="kuiEmptyTablePrompt__message">
          Looks like you don&rsquo;t have any dashboards. <span ng-if="!listingController.hideWriteControls">Let&rsquo;s create some!</span>
        </div>

        <div class="kuiEmptyTablePrompt__actions" ng-if="!listingController.hideWriteControls">
          <a
            class="kuiButton kuiButton--primary kuiButton--iconText"
            data-test-subj="createDashboardPromptButton"
            href="{{listingController.getCreateDashboardHref()}}"
          >
            <span class="kuiButton__inner">
              <span class="kuiButton__icon kuiIcon fa-plus"></span>
              <span>Create a dashboard</span>
            </span>
          </a>
        </div>
      </div>
    </div>

    <!-- Table -->
    <table class="kuiTable dashboardListingTable" ng-if="listingController.items.length">
      <thead>
        <tr>
          <th
            class="kuiTableHeaderCell kuiTableHeaderCell--checkBox"
            ng-if="!listingController.hideWriteControls"
            scope="col"
          >
            <div class="kuiTableHeaderCell__liner">
              <input
                type="checkbox"
                class="kuiCheckBox"
                ng-checked="listingController.areAllItemsChecked()"
                ng-click="listingController.toggleAll()"
                aria-label="{{listingController.areAllItemsChecked() ? 'Deselect all rows' : 'Select all rows'}}"
              >
            </div>
          </th>

          <th scope="col" class="kuiTableHeaderCell">
            <button
              class="kuiTableHeaderCellButton"
              ng-class="{'kuiTableHeaderCellButton-isSorted': listingController.getSortedProperty().name == 'title'}"
              ng-click="listingController.sortOn('title')"
              aria-label="{{listingController.isAscending('title') ? 'Sort name descending' : 'Sort name ascending'}}"
            >
              <span class="kuiTableHeaderCell__liner">
                Name
                <span
                  class="kuiTableSortIcon kuiIcon"
                  ng-class="listingController.isAscending('title') ? 'fa-long-arrow-up' : 'fa-long-arrow-down'"
                ></span>
              </span>
            </button>
          </th>

          <th scope="col" class="kuiTableHeaderCell">
            <button
              class="kuiTableHeaderCellButton"
              ng-class="{'kuiTableHeaderCellButton-isSorted': listingController.getSortedProperty().name == 'description'}"
              ng-click="listingController.sortOn('description')"
              aria-label="{{listingController.isAscending('description') ? 'Sort description descending' : 'Sort description ascending'}}"
            >
              <span class="kuiTableHeaderCell__liner">
                Description
                <span
                  class="kuiTableSortIcon kuiIcon"
                  ng-class="listingController.isAscending('description') ? 'fa-long-arrow-up' : 'fa-long-arrow-down'"
                ></span>
              </span>
            </button>
          </th>

          <th
            ng-if="!listingController.hideWriteControls"
            scope="col"
            class="kuiTableHeaderCell actionBtnHeaderCell"
          >
            <div class="kuiTableHeaderCell__liner">Actions</div>
          </th>
        </tr>
      </thead>

      <tbody>
        <tr
          ng-repeat="item in listingController.pageOfItems track by item.id"
          class="kuiTableRow"
          data-test-subj="dashboardListingRow"
        >
          <td class="kuiTableRowCell kuiTableRowCell--checkBox" ng-if="!listingController.hideWriteControls">
            <div class="kuiTableRowCell__liner">
              <input
                type="checkbox"
                class="kuiCheckBox"
                data-test-subj="dashboardListItemCheckbox"
                ng-click="listingController.toggleItem(item)"
                ng-checked="listingController.isItemChecked(item)"
                aria-label="{{listingController.isItemChecked(item) ? 'Deselect row' : 'Select row'}}"
              >
            </div>
          </td>

          <td class="kuiTableRowCell">
            <div class="kuiTableRowCell__liner">
              <a
                class="kuiLink"
                data-test-subj="dashboardListingTitleLink-{{item.title.split(' ').join('-')}}"
                ng-href="{{ listingController.getUrlForItem(item) }}"
              >
                {{ item.title }}
              </a>
            </div>
          </td>
          <td class="kuiTableRowCell kuiTableRowCell--wrap">
            <div class="kuiTableRowCell__liner">
              {{ item.description }}
            </div>
          </td>
          <td
            ng-if="!listingController.hideWriteControls"
            class="kuiTableRowCell kuiTableRowCell--wrap"
          >
            <div class="kuiTableRowCell__liner">
              <a
                class="kuiMenuButton kuiMenuButton--basic"
                data-test-subj="dashboardListingTitleEditLink-{{item.title.split(' ').join('-')}}"
                ng-href="{{ listingController.getEditUrlForItem(item) }}"
              >
                Edit
              </a>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- ToolBarFooter -->
    <div class="kuiToolBarFooter">
      <div class="kuiToolBarFooterSection">
        <div class="kuiToolBarText" ng-hide="listingController.getSelectedItemsCount() === 0">
          {{ listingController.getSelectedItemsCount() }} selected
        </div>
      </div>

      <div class="kuiToolBarSection">
        <!-- Pagination -->
        <tool-bar-pager-text
          start-item="listingController.pager.startItem"
          end-item="listingController.pager.endItem"
          total-items="listingController.pager.totalItems"
        ></tool-bar-pager-text>
        <tool-bar-pager-buttons
          has-previous-page="listingController.pager.hasPreviousPage"
          has-next-page="listingController.pager.hasNextPage"
          on-page-next="listingController.onPageNext"
          on-page-previous="listingController.onPagePrevious"
        ></tool-bar-pager-buttons>
      </div>
    </div>
  </div>
</div>
